<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>10.v-model获取和设置表单元素的值(双向数据绑定)</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="修改" @click="clk" />
			<!-- v-model获取和设置表单元素的值(双向数据绑定) -->
			<input type="text" v-model="messg" @keyup="key">
			<h2>{{messg}}</h2>
		</div>
		<script src="./vue-v2.7.13.js"></script>
		<script>
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				//输出的数据
				data: {
					messg: "5559"
				},
				//对象 方法
				methods: {
					key: function(e) {
						console.log(this.messg)
					},
					clk: function() {
						this.messg = "22222"
					}
				}
			})
		</script>

	</body>

</html>
